/*-------------------------------------
 * about.js
 * 
 * Manage Video Page
 */

var VideoPage = new Class ({

	Extends:  GHTPage,
	
	initialize: function (){
		this.parent("Videos");
		
		this.gif = new Image();
		this.gif.src = "/GHT/images/proc.gif"
		
        this.loadSideNav();
	},
	
    loadSideNav: function() {
         new Request.JSON({
            url: '/GHT?action=vendors.SideNav',
            
            data: 'page=Videos',
            
            method: 'post',
            
            onSuccess: function(json,text){
                sidenav = $('vendorlist');
                
                for (var i = 0; i < json.length; i++) {
                    tr = new Element('tr',{
                        'text': json[i],
                         value: json[i],
                        'class': "navrow"
                    }).inject(sidenav);
                    
                    tr.addEvent('click',function(ev) {
                        if ($$('tr[class^=navrow selected]').length > 0) {
                            $$('tr[class^=navrow selected]')[0].toggleClass('selected');
                        }
                        ev.target.toggleClass('selected');
                    	ghtPage.loadVideoList(ev.target.value);
                    });
                }
            }
        
        }).send(); 
    },
    
	loadVideoList: function(vendor) {		
		//make sure we start off with selected 0
		ghtPage.selected = "0";
		
		//cleanup and insert video div
     	$('video_message').empty();
        
        new Request.JSON({
			url: '/GHT?action=videos.Fetch',
			
            data: 'vendor=$1'.$$(vendor),
            
			method: 'post',
			
			onRequest: function() {
				ghtPage.toggleLoading('video_table',true);
			},
			
			onSuccess: function(json,text){
				ghtPage.toggleLoading('video_table',false);
				ghtPage.buildVideo(json);
			},
			
			onFailure: function(){
				ghtPage.toggleLoading('video_table',false);
				setVisibility('vidplayer',true);
			}
		
		}).send();
	},
	
	toggleLoading: function (div_id,bool) {
		div = $(div_id);
		
		if (bool) {
			div.style.backgroundColor = "#cecece";
			div.style.backgroundRepeat = "no-repeat";
			div.style.backgroundPosition = "center";
			div.style.backgroundImage = "url('/GHT/images/proc.gif')";
		} else {
			div.style.backgroundImage = "";
		}
	},
	
	/*function that uses an swfobject and create a video player and 
	*	playlist based on the passed in json['video_id']
	*/
	buildVideo: function (json){
		//array of ids from raw json
		array = [];
		for (var i = 0; i < json.length; i++) {
			array[i] = json[i]['video_id'];
		}
		
		swfobject.embedSWF(
			    'http://www.youtube.com/v/$1&enablejsapi=1&rel=0&fs=1'.$$(array[0]),
			    'vidplayer',
			    '550',
			    '400',
			    '8',
			    null,
			    '/GHT/scripts/expressInstall.swf',
			    {
			      allowScriptAccess: 'always',
			      allowFullScreen: 'true'
			    },
			    {
			      id: 'vidplayer'
			    }
		);
		
		if (swfobject.hasFlashPlayerVersion("8")){
			//loop through all video ids and create playlist
			vidnav = $('vidnav');
	        vidnav.empty();
	        
	        for (var i = 0; i < array.length; i++) {
				var a = new Element('a', {
					href: '#$1'.$$(array[i])
				}).inject(new Element('div',{
					styles: {'padding':'5px'},
					id: i
				}).inject(vidnav));
				
				$('0').set('class','selected');

				//youtube image ref
				new Element('img',{
					src: 'http://img.youtube.com/vi/$1/default.jpg'.$$(array[i])
				}).inject(a);
				
				a.addEvent('click', function(ev) {
					var el = $(ev.target.getParent().getParent());
					
					if (el.id == ghtPage.selected) {
					} else {
						$(String.from(ghtPage.selected)).toggleClass('selected');
						el.toggleClass('selected');
					}
					
					ghtPage.selected = el.id;
					
					ghtPage.ytplayer_loadvideo(ev.target.getParent().href.split('#')[1]);
				});
			}
		}
	},
	
	// js called from frontend to change swfobject
	ytplayer_loadvideo: function(id) {
		var o = $('vidplayer');
	    o.loadVideoById(id);
	    
	}
});

//-------------------------------------------
//Show time!
window.addEvent('domready', function(){
	// starting small
	ghtPage = new VideoPage();
});